<template>
  <div>
    <el-tooltip effect="dark" content="添加学生" placement="top-end">
      <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="dialogFormVisible = true"></el-button>
    </el-tooltip>
    <el-dialog title="添加成绩" :visible.sync="dialogFormVisible" center>
      <el-form :model="form" ref="gradeForm" :rules="rules">
        <el-form-item label="日期" :label-width="formLabelWidth" prop="date">
          <el-date-picker
              v-model="form.date"
              align="right"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学科" :label-width="formLabelWidth" prop="subject">
          <el-input v-model="form.subject"></el-input>
        </el-form-item>
        <el-form-item label="成绩" :label-width="formLabelWidth" prop="grade">
          <el-input v-model="form.grade"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;clearForm()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AddStudentGrade",
  data() {
    return {
      dialogFormVisible: false,
      //存放表单数据
      form: {
        date: '',
        grade: '',
        subject: ''
      },
      //验证规则
      rules: {
        date: [
          {required: true, message: '请输入日期', trigger: 'blur'},
        ],
        grade: [
          {required: true, message: '请输入学生学号', trigger: 'blur'},
        ],
        subject: [
          {required: true, message: '请输入学科', trigger: 'blur'},
        ]
      },
      formLabelWidth: '120px',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  props: ['studentId'],
  methods: {
    //进行添加成绩的操作
    addGrade() {
      this.addData()
      //todo 根据学号在数据库中添加相应的数据,并且刷新一次数据流
      alert('添加成功: ' +
          '学号: ' + this.studentId +
          '日期: ' + this.form.date +
          '学科: ' + this.form.subject +
          '成绩: ' + this.form.grade);

    },
    clearForm() {
      this.$refs.gradeForm.resetFields();
      console.log('清理表单')
    },
    submitForm() {
      this.$refs.gradeForm.validate((valid) => {
        if (valid) {
          this.addGrade()
          this.clearForm()
          this.dialogFormVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //添加学生成绩
    addData() {
      const data = {
        studentId: this.studentId,
        time: this.form.date,
        subject: this.form.subject,
        grade: this.form.grade
      }
      axios
          .post('teacher/addGrade', data)
          .then(response => {
            console.log(response.data)
            this.$store.dispatch("flashDataForTeacher_grade",this.studentId)
          })
          .catch(e => {
            console.log(e)
          })

    }
  },
}
</script>

<style scoped>
</style>